<template>
  <div class="detailDialog">
    <el-dialog :close-on-click-modal="false" class="width800" ref="ruleFormAdd" :append-to-body="true"  title="考核详情" :visible.sync="dialogFormVisibleAdd" @opened="$store.commit('dialogTop')">
      <el-table
        ref="multipleTable"
        :data="rows"
        v-show="type==1"
        stripe
        border
        :span-method="arraySpanMethod"
        tooltip-effect="dark"

      >
        <!--:style="'width:'+getTableWidth()"-->
        <el-table-column width="100" prop="a" >
        </el-table-column>

        <el-table-column label="区政府">
          <el-table-column
            v-for="(item,index) in areaList"
            :key="index"
            :prop="'value'+index"
            :label="item"
            show-overflow-tooltip>
          </el-table-column>
        </el-table-column>

      </el-table>
      <el-table
        ref="multipleTable"
        :data="rows"
        v-show="type==2"
        stripe
        border
        :span-method="arraySpanMethod"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="a" > </el-table-column>
        <el-table-column
          v-for="(item,index) in townList"
          :key="index"
          :prop="'value'+index"
          :label="item"
          show-overflow-tooltip>
        </el-table-column>

      </el-table>
      <el-table
        ref="multipleTable"
        :data="rows"
        v-show="type==3"
        stripe
        border
        :span-method="objectSpanMethod"
        tooltip-effect="dark"
        style="width: 100%"
      >

        <el-table-column prop="a" >
        </el-table-column>
        <el-table-column
          v-for="(item,index) in townList"
          :key="index"
          :prop="'value'+index"
          :label="item"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="区政府">
          <el-table-column
            v-for="(item,index) in areaList"
            :key="index"
            :prop="'value'+getvalue(index)"
            :label="item"
            show-overflow-tooltip>
          </el-table-column>
        </el-table-column>


      </el-table>
      <div style="text-align: center;margin-top: 20px;">
        <!--<el-button  size="small" @click="dialogFormVisibleAdd = false">取 消</el-button>-->
        <el-button style="margin-right: 20px;" type="primary" size="small" @click="dialogFormVisibleAdd = false">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>

  export default {
    props:[],
    data () {

      return {
        options: [],
        areaList: [],
        townList: [],
        totalScore: "",
        rows: [],
        dialogFormVisibleAdd: false,
        type: 3,

      }
    },
    created(){

    },
    methods: {
      getTableWidth(){
        return 100*this.areaList.length+1+"px"
      },
      getvalue(index){
        return index+this.townList.length
      },
      dialogOpen(info){
        this.type=3
        this.totalScore=info.totalScore

        this.axios.post(process.env.API_HOST + `/examine/selectItemsDetail`, info)
          .then(response => {
            let result = response.data
            if (result.code == 200) {
              if(result.result.length==0){
                this.$message({
                  type: 'warning',
                  message: "暂无详情"
                });
                return
              }

              this.townList=[],this.areaList=[]
              let arr=[],scoreArr=[]
              result.result.forEach(item=>{
                if(item.clazzName=="区政府"){
                  item.agencyDetailList.forEach(item2=>{
                    this.areaList.push(item2.agencyName)
                  })
                }else {
                  this.townList.push(item.clazzName)
                }
                if(item.agencyDetailList.length==0){
                  arr.push({weightScore:""})
                }else {
                  item.agencyDetailList.forEach(item1=>{
                    arr.push({weightScore:item.weightScore,...item1})
                  })
                }
              })
              if(this.townList.length==0){  //只有区域
                this.type=1
                scoreArr=[{a:"评分"},{a:"权重"},{a:"最终得分"}]

              }else if(this.areaList.length == 0){
                scoreArr=[{a:"评分"},{a:"权重"},{a:"最终得分"}]
                this.type=2
              }else {
                scoreArr=[{a:"评分"},{a:"权重"},{a:"加权得分"},{a:"最终得分"}]
                this.type=3
              }
              arr.forEach((item,key)=>{
                  scoreArr[0]['value'+key]=item.finalScore
                  scoreArr[1]['value'+key]=item.itemsWeight?item.itemsWeight:"--"
                  if(this.type==3){
                    scoreArr[2]['value'+key]=item.weightScore
                    scoreArr[3]['value'+key]=this.totalScore
                  }else{
                    scoreArr[2]['value'+key]=this.totalScore
                  }
              })
              this.rows = scoreArr
              this.dialogFormVisibleAdd = true
            }
          })
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex  === 2) {
          if (columnIndex === 1) {
            if( this.type==1){
              return [1, this.areaList.length];
            }else {
              return [1, this.townList.length];
            }
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex  === 2) {
          if (columnIndex === this.townList.length+1) {
            return [1, this.areaList.length+this.townList.length-1];
          } else if (columnIndex === this.townList.length+1) {
            return [0, 0];
          }
        }else if(rowIndex  === 3){
          if (columnIndex === 1) {
            return [1, this.areaList.length+this.townList.length];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .detailDialog
    display inline-block
    margin-left 20px
    text-align center
  .width800 .el-dialog
    width auto !important
    display inline-block
    min-width 300px
    margin 0 auto
</style>
